// Copyright (c) 2016 Chef Software Inc. and/or applicable contributors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.hab-origin-picker {
  @include omega;
  background-color: darken($hab-off-white,4);
  font-size: 90%;
  font-weight: bold;
  line-height: 56px;
  margin-bottom: $small-spacing;
  min-height: 56px;
  padding: 0 rem(35) 0 rem(15);
  position: absolute;
  top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  a {
    color: $hab-blue-dark;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  span {
    margin-top: rem(4);
    position: absolute;
    right: rem(15);
  }

  &:active,
  &:focus,
  &:hover {
    color: $hab-orange;
  }

  &--toggle {
    border-radius: $global-radius;
    line-height: 2.2em;
    margin-top: rem(12);
    white-space: nowrap;
  }

  &--list {
    @include dropdown-panel;
    line-height: $base-spacing;
    margin-bottom: $small-spacing;
    max-width: rem(300);
    min-width: rem(240);
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    top: rem(60);
    z-index: 400;

    &--item {
      margin-top: rem(12);
      max-width: 100%;
      overflow-x: hidden;

      a {
        display: block;
      }

      &:last-child {
        border-top: 1px solid $light-gray;
        line-height: $base-spacing * 2;
        margin-top: rem(20);
        padding-top: rem(8);
      }
    }

    &--current {
      color: $dark-gray;
      cursor: not-allowed;
      display: block;
      max-width: 100%;
      overflow: hidden;
      padding-right: 30px;
      position: relative;
      text-overflow: ellipsis;

      &:active,
      &:focus,
      &:hover {
        color: $dark-gray;
      }
    }

    &--i {
      float: right;
      position: absolute;
      right: 0;
      top: 3px;
    }
  }
}
